<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8" x-frame-options="x-frame-options">
    <title>Title</title>
    <script src="{% static './echart/echarts.js' %}"></script>
    <style>
        h1{
            display: block;
            width: 400px;
            margin-left: 100px;
            margin-top: 90px;
        }

        h3{
            display: block;
            width: 400px;
            margin-left: 100px;
            margin-top: 30px;
        }

        .container{
            display: flex;
            flex-direction: row;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <h1>欢迎 {{user_name}} 登录后台</h1>
        <br>
        <h3>您的生日是：{{birthday}}</h3>
        <br>
        <h3>您当前的住址是：{{address}}</h3>
        <div id="datelist" date="{{date_list}}"></div>
    </div>
    <div id="main" style="width: 800px;height:400px;margin-left: 200px;margin-top: 30px"></div>
</div>
</body>
<script type="text/javascript">

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var datelist = document.getElementById('datelist').getAttribute('date');
// 是将json字符串转成js能识别的列表
datelist = JSON.parse(datelist)
option = {
  title: {
    text: '广州市5天天气温度走势'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: datelist
    // data: JSON.parse({{date_list}})
    // data: ["2023-12-05","2023-12-05","2023-12-05","2023-12-05","2023-12-05"]
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: {{heighest}},
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: {{lowestest}},
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

option && myChart.setOption(option);
</script>
</html>